<template>
	<view class="app l_pages" :style="skin">
		<!-- <jnavbar :title="'分类'" :PageId="3"></jnavbar> -->
		<view class="page_container tab_page_container">
			<view class="search_div">
				<view class="input_div" @click="gosearch">
					<text class="iconfont el-sc-search "></text>
					<text>搜索商品</text>
				</view>
			</view>
			<block v-if="level == 3">
				<leftmenu :list="list" @change="changetab"></leftmenu>
				<scroll-view scroll-y class="right">
					<block v-if="type != 3">
						<view v-for="(item, index) in list[a_id].children" :key="index">
							<view class="uni-flex-row uni-flex-title pd">
								<text class="mid-font">{{ item.name }}</text>
								<view class="uni-flex-row mid-font" @click="tolist(item)">
									<text>更多</text>
									<text class="el-sc-xiangyou iconfont"></text>
								</view>
							</view>
							<block v-if="type == 1"><rightmenu :list="item.children"></rightmenu></block>
							<block v-if="type == 2">
								<view class="categorylist ">
									<view class="categoryitem">
										<view class="category_child">
											<view v-for="(data, i) in item.children" :key="i" @click="tolist(data)">
												<vimage class="img_box" :src="data.img"></vimage>
												<text>{{ data.name }}</text>
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
					</block>
					<block v-if="type == 3">
						<scroll-view scroll-x>
							<view class="tabs uni-flex-row s_tabs">
								<view
									v-if="list[a_id].children.length > 0"
									@click="p_id = i"
									:class="[p_id == i ? 'active tabs_item' : 'tabs_item']"
									v-for="(data, i) in list[a_id].children"
									:key="i"
									
								>
									{{ data.name }}
								</view>
							</view>
						</scroll-view>

						<block v-if="list[a_id].children.length > 0">
							<view v-for="(item, u) in list[a_id].children[p_id].children" :key="u">
								<view class="uni-flex-row uni-flex-title pd">
									<text class="mid-font">{{ item.name }}</text>
									<view class="uni-flex-row mid-font" @click="tolist(item)">
										<text>更多</text>
										<text class="el-sc-xiangyou iconfont"></text>
									</view>
								</view>
								<plist v-if="classify_id > 0" :cid="list[a_id].id + '->' + list[a_id].children[p_id].id + '->' + item.id"></plist>
							</view>
						</block>
					</block>
				</scroll-view>
			</block>

			<block v-if="level == 2">
				<block v-if="type == 1">
					<leftmenu :list="list" @change="changetab"></leftmenu>
					<scroll-view scroll-y class="right"><rightmenu :list="list[a_id].children"></rightmenu></scroll-view>
				</block>
				<block v-if="type == 2">
					<leftmenu :list="list" @change="changetab"></leftmenu>
					<scroll-view scroll-y class="right">
						<view class="categorylist" v-if="list.length > 0">
							<view class="categoryitem">
								<view class="category_child">
									<view @click="tolist(data)" v-for="(data, i) in list[a_id].children" :key="i">
										<vimage class="img_box" :src="data.img"></vimage>
										<text>{{ data.name }}</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</block>
				<block v-if="type == 3">
					<v-tabs
						v-model="a_id"
						:tabs="list"
						:field="'name'"
						:pills="true"
						:activeColor="'#fff'"
						:pillsColor="'#ff3c29'"
						:pillsBorderRadius="'50rpx'"
						:height="'50rpx'"
						:paddingItem="'0 20rpx'"
						:scroll="true"
						@change="changetab1"
					></v-tabs>
					<!-- 		<v-tabs
					v-if="list[a_id].children.length > 0"
						v-model="p_id"
						:tabs="list[a_id].children"
						:field="'name'"
						:pills="false"
						:activeColor="'#fff'"
						:pillsColor="'#ff3c29'"
						:pillsBorderRadius="'50rpx'"
						:height="'50rpx'"
						:paddingItem="'0 20rpx'"
						:scroll="true"
						@change="changetab1"
					></v-tabs> -->
					<scroll-view scroll-x>
						<view class="tabs " v-if="list[a_id].children.length > 0">
							<view @click="p_id = i" :class="[p_id == i ? 'active tabs_item' : 'tabs_item']" v-for="(data, i) in list[a_id].children" :key="i">{{ data.name }}</view>
						</view>
					</scroll-view>

					<scroll-view @scroll="myscroll" @scrolltolower="getmorelist" class="scroll-view" scroll-y="true">
						<plist :scrollTop="scrollTop" ref="plist" :showtype="0" v-if="list[a_id].children[p_id]" :cid="list[a_id].id + '->' + list[a_id].children[p_id].id"></plist>
					</scroll-view>
				</block>
				<block v-if="type == 4">
					<leftmenu :list="list" @change="changetab"></leftmenu>

					<view class="right" style="padding: 0;">
						<scroll-view scroll-x>
							<view class="tabs uni-flex-row s_tabs">
								<view @click="p_id = i" :class="[p_id == i ? 'active tabs_item' : 'tabs_item']" v-for="(data, i) in list[a_id].children" :key="i">
									{{ data.name }}
								</view>
							</view>
						</scroll-view>
						<scroll-view @scroll="myscroll" @scrolltolower="getmorelist" scroll-y="true" style="height: calc(100% - 70rpx);">
							<plist :scrollTop="scrollTop" ref="plist" v-if="classify_id > 0" :cid="list[a_id].id + '->' + list[a_id].children[p_id].id"></plist>
						</scroll-view>

						<!-- <plist v-if="classify_id" :cid="list[a_id].id + '->' + list[a_id].children[p_id].id"></plist> -->
					</view>
				</block>
			</block>
			<block v-if="level == 1">
				<scroll-view class="categorylist one_one" scroll-y v-if="type == 1">
					<view class="categoryitem">
						<view class="category_child">
							<view v-for="(data, i) in list" :key="i" @click="tolist(data.id)">
								<vimage class="img_box" :src="data.img"></vimage>
								<text>{{ data.name }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<block v-if="type == 2">
					<scroll-view class="ls_container" scroll-y="true"><rightmenu :list="list"></rightmenu></scroll-view>
					<!-- <view class="two_one"></view> -->
				</block>
				<block v-if="type == 3">
					<v-tabs
						v-model="a_id"
						:tabs="list"
						:field="'name'"
						:pills="true"
						:activeColor="'#fff'"
						:pillsColor="'#ff3c29'"
						:pillsBorderRadius="'50rpx'"
						:height="'50rpx'"
						:paddingItem="'5rpx 30rpx'"
						:padding="'5rpx 0'"
						:scroll="true"
					></v-tabs>
					<scroll-view @scroll="myscroll" @scrolltolower="getmorelist" :class="hastabbar ? 'scroll-view-13' : 'scroll-view-page-13'" scroll-y="true">
						<plist :scrollTop="scrollTop" ref="plist" :showtype="0" v-if="list[a_id].id" :cid="list[a_id].id"></plist>
					</scroll-view>
				</block>
				<block v-if="type == 4">
					<leftmenu :list="list" @change="changetab"></leftmenu>

					<scroll-view @scroll="myscroll" @scrolltolower="getmorelist" scroll-y="true" class="right" style="padding: 0;">
						<plist :scrollTop="scrollTop" ref="plist" v-if="classify_id" :cid="classify_id"></plist>
					</scroll-view>
				</block>
			</block>
		</view>
		<tab-bar ref="tabbar" :PageId="3"></tab-bar>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
		<!-- 	<common></common> -->
		<trolley></trolley>
		<floatmenu page_id="9"></floatmenu>
		<nloading></nloading>
	</view>
</template>

<script>
import leftmenu from '@/components/category/leftmenu.vue';
import plist from '@/components/category/plist.vue';
import rightmenu from '@/components/category/rightmenu.vue';
import {mapState, mapMutations} from 'vuex';
export default {
	data() {
		return {
			list: [],
			a_id: 0,
			p_id: 0,
			level: 1,
			type: 1,
			tabs: [],
			classify_id: '',
			scrollTop: 0
		};
	},
	components: {
		leftmenu,
		plist,
		rightmenu
	},
	computed: {
		...mapState({
			hastabbar: state => state.hastabbar,
			skin: state => state.skin
		})
	},
	onShareAppMessage() {
		return this.wxShare();
	},
	onPullDownRefresh() {
		this.getlist();
	},
	async onLoad() {
		await this.$getWx;
		this.getlist();
	},
	onShow() {},
	methods: {
		logincallback(e) {
			if (e.islogin) {
			}
		},
		myscroll(e) {
			this.scrollTop = e.detail.scrollTop;
		},
		gosearch() {
			this.Jumpurl({
				link: '../list/searchindex',
				type: 1,
				login_type: 1
			});
		},
		changetab1(index) {
			this.p_id = 0;
		},
		changetab(i) {
			this.a_id = i;
			this.p_id = 0;
			if (this.level == 1) {
				this.classify_id = this.list[i].id;
			}
			if (this.level == 2) {
				if (this.list[i].children.length > 0) {
					this.classify_id = this.list[i].children[0].id;
				} else {
					this.classify_id = -1;
				}
			}
			if (this.level == 3) {
				if (this.list[i].children.length > 0) {
					if (this.list[i].children[0].children.length > 0) {
						this.classify_id = this.list[i].children[0].children[0].id;
					} else {
						this.classify_id = -1;
					}
				} else {
					this.classify_id = -1;
				}
			}
		},
		getlist() {
			this.changeloading({loading: true});
			let params = {};
			this.$http('/classify', params, 'get').then(res => {
				uni.stopPullDownRefresh();
				if (res.statusCode == 200) {
					this.list = res.data.msg.data;
					this.type = res.data.msg.type;
					this.level = res.data.msg.level;
					if (this.level == 1) {
						this.classify_id = this.list[0].id;
					}
					if (this.level == 2) {
						this.classify_id = this.list[0] && this.list[0].children[0] ? this.list[0].children[0].id : 0;
					}
					if (this.level == 3) {
						this.classify_id = this.list[0] && this.list[0].children[0] && this.list[0].children[0].children[0] ? this.list[0].children[0].children[0].id : 0;
					}
					this.changeloading({loading: false});
				}
			});
		},
		// getid(list, level) {
		// 	if(level==2){
		// 		let l = list.filter(a => {
		// 			return a.children.length > 0;
		// 		});
		// 		if(l.length>0){
		// 			rut
		// 		}
		// 	}

		// 	let b=
		// },
		tolist(data) {
			let id = '';
			if (data.pid) {
				id = data.pid + '->' + data.id;
			} else {
				id = data.id;
			}
			this.Jumpurl({
				link: '../list/list?id=' + id,
				type: 1,
				login_type: 1
			});
		},
		getmorelist() {
			this.$refs.plist.goodslist();
		}
	}
};
</script>

<style lang="scss">
.app {
	background: #f0f0f0;
	/deep/.v-tabs {
		background: #fff;
	}
}
.page_container {
	position: relative;
}
.right {
	position: absolute;
	right: 0;
}
.scroll-view {
	height: calc(100% - 210rpx);
}
.scroll-view-13 {
	height: calc(100% - 92rpx - 60rpx);
}
.ls_container {
	height: calc(100% - 92rpx);
	background-color: #ffffff;
}
.search_div {
	width: 750rpx;
	background: #fff;
	padding: 16rpx 32rpx;
	.input_div {
		display: flex;
		align-items: center;
		background: #f5f5f5;
		height: 60rpx;
		border-radius: 12rpx;
		font-size: 24rpx;
		color: #8e8e8e;
	}
	.iconfont {
		margin: 0 15rpx;
	}
}

.right {
	background: #fff;
	float: left;
	width: calc(100vw - 92px);
	height: calc(100% - 92rpx);
	// padding: 0 12px;
	box-sizing: border-box;
}
.pd {
	padding: 20rpx;
}
.categorylist {
	.categoryitem {
		padding: 32rpx 24rpx;
		border-radius: 8rpx;
		background-color: #fff;
		margin-bottom: 16rpx;

		.category_child {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 10rpx;
			view {
				display: flex;
				flex-direction: column;
				text-align: center;
				font-size: 24rpx;
				text {
					padding: 10rpx 0;
				}
				.img_box {
					width: 140rpx;
					height: 140rpx;
					background: #f1f1f1;
				}
				// image {

				// }
			}
		}
	}
	&.one_one {
		height: calc(100% - 92rpx);
		background: #ffffff;
		.category_child {
			justify-content: flex-start;
			view {
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
			view:nth-child(4n) {
				margin-right: 0;
			}
		}
	}
}
.two_one {
	margin: 0 32rpx;
}
.tabs {
	padding: 0 10rpx;
	background: #fff;
	display: inline-flex;
	white-space: nowrap;
	height: 70rpx;
	min-width: 100%;
	.tabs_item {
		padding: 0 20rpx;
		height: 50rpx;
		border: 1rpx solid #999;
		border-radius: 25rpx;
		margin: 10rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		&.active {
			border: 1rpx solid var(--main-color);
			color: var(--main-color);
		}
	}
}
.s_tabs {
	min-width: 100%;
	position: relative;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
}
</style>
